<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>数据平台管理</h2>
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
        <p>
        </p>
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <!-- 新增的欢迎区域 -->
        <div class="welcome-card">
          <div class="welcome-header">
            欢迎使用数据治理系统
          </div>
          <p class="welcome-desc">
            数据治理是指对数据进行管理和监控，确保数据的准确性、一致性、安全性和可用性，提高数据的价值。
          </p>
          <div class="info-cards">
            <div v-for="(card, index) in infoCards" :key="index" class="info-card">
              <div class="card-header">
                <div class="card-index">{{ card.index }}</div>
                <div class="card-title">{{ card.title }}</div>
              </div>
              <div class="card-desc">
                {{ card.desc }}
              </div>
              <a href="javascript:void(0);" @click="goTarget(card.link)">了解更多 > </a>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref } from 'vue';

const version = ref('0.0.1');

const infoCards = ref([
  {
    index: 1,
    title: '了解数据治理',
    desc: '数据治理是指对数据进行管理和监控，确保数据的准确性、一致性、安全性和可用性，提高数据的价值。',
    link: 'https://example.com/data-governance'
  },
  {
    index: 2,
    title: '了解数据管理工具',
    desc: '数据管理工具是实现数据治理的关键部分，它可以帮助组织更好地理解、控制和利用其数据资产。',
    link: 'https://example.com/data-tools'
  },
  {
    index: 3,
    title: '实践数据治理',
    desc: '实践数据治理需要制定明确的数据标准、流程和责任分配，以确保数据在整个生命周期内的质量和安全性。',
    link: 'https://example.com/data-practice'
  }
]);

function goTarget(url) {
  window.open(url, '__blank');
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.welcome-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
}

.welcome-header {
  font-size: 20px;
  color: #333;
  margin-bottom: 16px;
}

.welcome-desc {
  font-size: 14px;
  color: #676a6c;
  line-height: 22px;
  margin-bottom: 32px;
}

.info-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.info-card {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 14px;
  color: #676a6c;
  line-height: 22px;
  padding: 16px 19px;
  min-width: 220px;
  flex: 1;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.card-index {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background-image: url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg');
  background-size: cover;
  color: white;
  font-weight: bold;
  margin-right: 8px;
}

.card-title {
  font-size: 16px;
  color: #333;
}

.card-desc {
  font-size: 14px;
  color: #676a6c;
  text-align: justify;
  line-height: 22px;
  margin-bottom: 8px;
}
</style>